<template>
  <div class="search-narBar">
    <navBar :isleft-arrow="true" :is-right-arrow="true">
      <div class="search-content">
        <div class="currentCity">
          {{ currentCity }}
        </div>
        <div class="select-time">
          <div class="item start">
            <span class="name">住</span
            ><span class="date">{{ startDate }}</span>
          </div>
          <div class="item end">
            <span class="name">离</span><span class="date">{{ endDate }}</span>
          </div>
        </div>
        <div class="search-hint">搜索景点、地标、房源</div>
      </div>
    </navBar>
  </div>
</template>

<script setup>
import navBar from "../../../components/nav-bar/nav-bar.vue";
import { defineProps } from "vue";
defineProps({
  currentCity: {
    type: String,
    default: "",
  },
  startDate: {
    type: String,
    default: "",
  },
  endDate: {
    type: String,
    default: "",
  },
});
</script>

<style lang="less" scoped>
.search-narBar {
  width: 100%;
  height: 46px;
  background-color: #fff;
}
.search-content {
  display: flex;
  margin-top: 6px;
  width: 100%;
  height: 38px;
  background-color: #f2f4f6;
  border-radius: 10px;
  .currentCity {
    font-weight: 500;
    min-width: 30px;
    font-size: 14px;
    text-align: center;
    line-height: 38px;
    padding: 0 6px;
    margin-right: 5px;
    border-right: 1px solid #fff;
    color: #333;
    white-space: nowrap;
  }
  .select-time {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 6px;
    border-right: 1px solid #fff;
  }
  .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    line-height: normal;
    font-size: 10px;
  }
  .search-hint {
    padding-left: 6px;
    line-height: 38px;
    font-size: 12px;
    color: #999;
  }
  .date {
    margin-left: 2px;
    font-size: 8px;
  }
}
</style>
